<template>
  <div>
    <Search :searchData="searchData" @submitData="submit" :searchInfo="info"></Search>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw } from 'vue'
import Search from './search.vue'

export default defineComponent({
  name: 'Home',
  components: {
    Search
  },
  setup() {
    const searchArr = reactive([
      {
        type: 'input',
        value: 'name',
        label: '交易编号',
        placeholder: '请输入交易编号'
      },
      {
        type: 'input',
        value: 'name',
        label: '收货人',
        placeholder: '请输入收货人'
      },
      {
        type: 'input',
        value: 'name',
        label: '收货人电话',
        placeholder: '请输入收货人电话'
      },
      {
        type: 'input',
        value: 'name',
        label: '收货地址',
        placeholder: '请输入收货地址'
      },
      {
        type: 'select',
        value: 'sex',
        label: '订单状态',
        placeholder: '订单状态',
        menu: [
          {
            value: 1,
            label: '北京'
          },
          { value: 2, label: '上海' }
        ]
      },
      {
        type: 'picker',
        value: 'date',
        label: '创建时间'
      },
      {
        type: 'picker',
        value: 'date',
        label: '过期时间'
      }
    ])
    const searchInfo = reactive({
      name: '',
      sex: '',
      date: ''
    })
    const submit = (value: object) => {
      console.log(value, '我是组件返回的查询条件')
    }
    const searchData = toRaw(searchArr)
    const info = toRaw(searchInfo)
    return {
      searchData,
      submit,
      info
    }
  }
})
</script>
